LAPORAN TUGAS MATA KULIAH

METODOLOGI DESAIN PERANGKAT LUNAK PRAKTIK

Dosen : Irma Handayani, S.Kom., M.Cs.

Studi Kasus

“ PERANCANGAN APLIKASI MENGGAMBAR ONLINE BERBASIS WEB

MENGGUNAKAN METODE SCRUM ”

Oleh :

5200411122 Gressensia Olivia Neno Aumenu

5200411144 Bella Primin

5200411202 Berliana 'Isyatin Rodhiyah

5200411226 Ade Lia Saputri

5200411236 Lili Christi

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS TEKNOLOGI YOGYAKARTA

BAB I

PENDAHULUAN

1.1 Latar Belakang

Menggambar adalah salah satu cara untuk mengekspresikan perasaan melalui goresan

pena. Untuk mengekspresikan diri, biasanya anak kecil akan suka mencoret-coret kertas.

Dikarenakan kebiasaan mencoret itu, banyak kertas yang terbuang dan tidak bisa dipakai

lagi. Apalagi penggunaan kertas dalam kehidupan semakin bertambah. Banyaknya

konsumsi kertas tentu saja dapat mempengaruhi tingkat penebangan pohon.

Selain kertas, banyak pula benda benda yang rusak, juga banyak dinding yang kotor

akibat coretan para anak kecil. Kerusakan yang ditimbulkan akan membutuhkan lebih

banyak budget untuk memperbaikinya. Selanjutnya, penggunaan pensil, pensil warna,

krayon, ataupun cat, belum terlalu perlu hanya untuk bermain anak-anak, karna akan

menambah budget yang dibutukan untuk itu.

Berawal dari adanya keluhan para orangtua dari anak-anak tentang menggambar

dengan sistem manual, banyaknya media serta bahan yang harus dikumpulkan, untuk itu

kami melakukan sebuah pembuatan rancangan aplikasi menggambar berbasis web.

Dalam aplikasi menggambar online ini dapat membantu meminimalisir penggunaan

kertas sebagai media serta dapat mengurangi budget yang akan dikeluarkan untuk anak-

anak menggambar. Selain itu, aplikasi ini akan membantu anak-anak untuk belajar

menggambar. Hal ini sangat mempermudah proses menggambar dalam media dan bidang

yang ada.

Kebutuhan akan berbagai macam urusan dalam segala aktivitas di berbagai bidang

skala kebutuhan yang sangat besar telah melibatkan komputer sebagai sarana untuk

penyimpanan dan pemrosesan data, komputer telah mampu menciptakan mekanisme kerja

yang semakin maju dan lebih efektif. Kami menggunakan software HTML sebagai alat

bantu dalam proses pembuatan aplikasi yang diharapkan dapat membantu jalannya proses

penggambaran dengan adanya sistem yang efisien dan lebih fleksibel.

1.2 Batasan Masalah

Berdasarkan dari identifikasi masalah tersebut, kami membatasi masalah hanya pada:

a. Alat menggambar yang digunakan hanya berupa garis dan warna.

b. Tampilan menggambar berupa kanvas, volume garis, dan pilihan warna.

c. Gambar dapat disimpan, diubah, dan dihapus.

1.3 Rumusan Masalah

Mengenai rumusan masalah yang akan dibahas, berdasarkan konteks masalah yang

diuraikan di atas, khususnya yaitu:

a. Bagaimana cara membuat aplikasi menggambar berbasis web.

b. Bagaimana merancang dan membangun aplikasi menggambar yang mudah

digunakan untuk anak-anak.

1.4 Tujuan Penelitian

Tujuan dilakukanya penelitian ini yaitu:

a) Menghasilkan sebuah aplikasi menggambar untuk anak-anak.

b) Menghasilkan aplikasi menggambar yang dapat dengan mudah digunakan.

1.5 Manfaat Penelitian

Berikut adalah manfaan dari dilakukanya penelitian ini adalah :

a) Mepermudah anak-anak untuk dapat menggambar dan mewarnai.

b) Mengurangi penggunaan kertas

c) Mengurangi penggunaan budget untuk menggambar.

BAB II

LANDASAN TEORI

2.1 Definisi Menggambar

Secara umum pengertian menggambar adalah kegiatan menorehkan pensil ataupun

pewarna di atas media kertas. Sedangkan pengertian secara khusus, menggambar adalah

kegiatan-kegiatan membentuk imaji, dengan menggunakan banyak pilihan teknik dan alat

dengan membuat tanda-tanda tertentu di atas permukaan media dengan mengolah goresan

dari alat gambar. Gambar merupakan karya seni rupa dua dimensi yang berfungsi untuk

untuk menerangkan ataupun menjelaskan sesuatu.

2.2 Sistem Menggambar

Menggambar adalah kegiatan membentuk citra dengan menggunakan banyak

pilihan teknik dan alat. Dengan membuat tanda-tanda tertentu di atas permukaan dan

mengolah goresan dari alat gambar. Kebanyakan karya menggambar adalah representasi

dari ingatan atau imajinasi seorang juru gambar.

2.3 HTML

HTML adalah bahasa standar pemrogaman yang digunakan untuk membuat halaman

website, yang diakses melalui internet. Singkatan dari "Hypertext Markup Language" atau

"bahasa markup". HTML disusun berdasar kode dan simbol tertentu, yang dimasukkan

dalam sebuah file atau dokumen. Sehingga bisa ditampilkan pada layar komputer. Dan

bisa dipahami oleh para pengguna internet.

Memahami setiap kata yang terkandung, hypertext sendiri dimaksudkan sebagai

metode yang digunakan untuk berpindah laman web ke laman lain. Usai mengklik tulisan

atau simbol yang muncul di halaman website.

Lalu istilah markup, diartikan sebagai suatu hal yang dilakukan tag HTML terhadap

teks didalamnya. Contoh jika mengetik suatu teks dengan tanda tag . Maka teks tersebut

akan muncul dengan huruf tebal atau bold di laman website.

2.4 CSS

CSS adalah kepanjangaan dari Cascading Style Sheets yang berguna untuk

menyederhanakan proses pembuatan website dengan mengatur elemen yang tertulis di

bahasa markup.CSS dipakai untuk mendesain halaman depan atau tampilan website. CSS

menangani tampilan dan ‘rasa’ dari halaman website.

Ada banyak hal yang dapat Anda lakukan menggunakan CSS dibandingkan dengan

bahasa pemrograman inti seperti HTML dan PHP. Ketika menggunakan CSS, Anda dapat

mengatur warna teks, jenis font, baris antar paragraf, ukuran kolom, dan

jenis background yang dipakai.Tidak hanya itu CSS juga bisa untuk mendesain layout,

variasi tampilan di berbagai perangkat yang berbeda, dan berbagai efek yang dipakai di

dalam website.

CSS sangat mudah dipelajari, tapi juga powerful karena dapat mengontrol penyajian 
tampilan dari dokumen HTML. Mulai dari yang simpel sampai kompleks. Tidak heran jika 
saat ini CSS hampir dipakai di berbagai website untuk dikombinasikan dengan HTML 
maupun PHP. 
 
2.5 JAVASCRIPT 
JavaScript (disingkat JS) adalah bahasa pemrograman tingkat tinggi dan dinamis. 
JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web popular 
seperti  Google  Chrome, Internet  Explorer (IE),  Mozilla  Firefox, Netscape dan Opera. 
Kode JavaScript  dapat  disisipkan  dalam halaman web menggunakan tag SCRIPT. 
JavaScript merupakan salah satu teknologi inti World Wide Web selain HTML dan CSS. 
JavaScript membantu membuat halaman web interaktif dan merupakan bagian aplikasi 
web yang esensial. 
 
2.6 Metode Scrum 
Scrum adalah salah satu metode rekayasa software dengan menggunakan prinsip-
prinsip agile yang bertumpu pada kekuatan kolaborasi tim, incremental product dan proses 
iterasi  untuk  mewujudkan  hasil  akhir.  Menurut  schwaber  &  sutherland  scrum  adalah 
sebuah kerangka kerja yang dapat mengatasi suatu masalah komplek yang selalu berubah, 
dan juga dinilai dapat memberikan kualitas produk yang baik sesuai dengan keinginan 
pengguna secara kreatif dan produktif 
Dalam teknik scrum terdapat tiga peranan penting, diantaranya adalah:  
a) Product Owner adalah seseorang yang memiliki tanggung jawab untuk terus 
berinteraksi  kepada  tim  pengembang  terkait  dengan  visi  dan  prioritas 
sehingga dapat  dihasilkannya nilai bisnis  dari  produk  yang dikembangan 
secara maksimal.  
b) Scrum  Master berfungsi sebagai  fasilitator  untuk  product  owner  dan  tim 
pengembang  yang  terdiri  dari  developer  dan  tester  (Quality  Asurance). 
Scrum  Master  tidak  bertanggung  jawab  denganpengelolaan  tim.  Scrum 
Master  membantu  tim  menghilangkan  hambatan  dan  mencapai  tujuan. 
Scrum  Master  juga  bertugas  memberikan  rekomendasi  kepada  product 
owner tentang bagaimana cara memaksimalkan Return On Investment (ROI) 
untuk tim.  
c) Development Team/Scrum Team yang mengatur urusan teknik pengerjaan 
project.  Development  Team  atau  tim  pengembang  memiliki  sekitar  lima 
sampai sembilan anggota. 
 2.6.1 Tahapan Metode Scrum 
Tahapan  pengembangan  sistem  dengan  metode  Scrum  dapat 
diilustrasikan dalam gambar 1 sebagai berikut : 
 

Penjelasan proses scrum secara umum dari Gambar diatas adalah sebagai berikut:

a) User Story

User Story adalah deskripsi secara rinci tentang kebutuhan sistem dalam bentuk

bahasa yang dapat dengan mudah dipahami oleh sudut padang end user. User story

digunakan sebagai acuan untuk membuat product backlog.

b) Product Backlog

Product Backlog adalah daftar urutan segala sesuatu yang dibutuhkan dalam

sistem maupun produk. Isi dari Product Backlog berisi fitur yang akan diterapkan

ke dalam sistem beserta estimasi waktu pengerjaannya. Dokumen ini selalu berubah-

ubah secara berkala seiring dengan perkembangan produk agar menghasilkan

produk yang layak. Product Owner merupakan satu-satunya yang bertanggung

jawab pengelolaan Product Backlog.

c) Sprint

Sprint adalah suatu siklus waktu dengan durasi maksimal satu bulan atau kurang.

Durasi pada sprint sepanjang pengembangan produk tidak berubah. Tujuan sprint

adalah untuk menyelesaikan sesuatu (Sprint Goal).

d) Sprint Backlog

Sprint Backlog adalah kumpulan dari item Product Backlog yang diidentifikasi

oleh tim scrum. Daftar ini dikerjakan selama sprint berlangsung. Tim memilih

beberapa item product backlog dan mengidentifikasi tugas-tugas yang perlu untuk

diselesaikan berdasarkan user story yang ada.

e) Daily Scrum

Daily Scrum adalah aktivitas harian di dalam sprint yang dilakukan scrum team

untuk memeriksa apa yang telah dikerjakan, apa yang akan dikerjakan dan apa yang

mungkin menjadi hambatan dalam pengerjaan proyek. Scrum team menggunakan

daily scrum sebagai sarana untuk memperbaiki perkembangan produk agar

tercapainya sebuah Sprint Goal.

BAB III

ANALISIS DAN PERENCANAAN SISTEM

3.1 ANALISIS SISTEM

Penelitian ini diharapkan dapat menghasilkan sebuah aplikasi menggambar yang

dapat digunakan untuk semua kalangan, terutama anak-anak, dengan mudah dan efektif.

Kebutuhan system ialah sebagai berikut :

a. Aplikasi ini berbasis web yang akan digunakan pada browser.

b. Aplikasi akan terkoneksi ke server database melalui koneksi internet dari

perangkat user

3.2 PENELITIAN

Dalam penelitian ini menganalisa dan memaparkan bagaimana konsep penerapan

metode scrum dalam pengembangan aplikasi menggambar berbasis web. Kami merancang

aplikasi dengan melakukan beberapa penelitian dengan menerapakan metode scrum dalam

mengembangkan sistem aplikasi menggambar berbasis web yang kami buat.

Penelitian ini dengan judul Perancangan Aplikasi Menggambar Online Berbasis Web

Menggunakan Metode Scrum menghasilkan sistem perancangan aplikasi yang dapat

memenuhi kebutuhan pengguna secara signifikan dalam metode scrum. Penyelesaian

setiap modul perangkat lunak berdasarkan tahapan dari metode scrum dapat berjalan

dengan baik dan lancar dalam waktu yang singkat.

3.3 METODE PENELITIAN

Teknik pengumpulan data yang digunakan dalam penelitian ini, sebagai berikut:

a. Observasi

Observasi merupakan teknik mendapatkan data primer dengan cara mengamati

langsung onyek datanya (Jogiyanto, 2008). Pada penelitian ini, observasi

dilakukan secara online untuk mengamati proses user menggambar dan hasil

b. Wawancara

Wawancara adalah komunikasi dua arah untuk mendapatkan data daru responden

(Jogiyanto, 2008). Wawancara dilakukan untuk mengkonfirmasi data atau fakta

yang diperoleh pada saat observasi serta sekaligus untuk menggali software

requirement dari user. Wawancara dilakukan kepada user yang terlibat dalam

proses menggambar online

c. Studi Pustaka

Studi pustaka dilakukan untuk mengumpulkan data dan informasi melalui

dokumen-dokumen baik dalam bentuk buku, jurnal, prosiding, laporan-laporan,

atau bentuk-bentuk lain dalam bentuk tercetak maupun digital. Studi pustaka akan

semakin kredibel apabila didukung oleh foto-foto atau karya tulis akademik dan

seni yang telah ada.

3.4 METODE PENGEMBANGAN SISTEM

Dalam setiap iterasi kegiatan pengembangan tersebut, terdiri dari rangkaian kegiatan,

sebagai berikut :

1) Analisa Kebutuhan Sistem

Pada tahap ini dilakukan asesmen terhadap pengguna untuk menggali secara detail

software requirement yang dibutuhkan oleh pengguna.

2) Desain

Pada tahap desain dilakukan perancangan sistem, mulai dari desain arsitektur

sistem, desain proses bisnis, hingga desain user interface.

3) Code Generation

Pada tahap ini dilakukan penulisan kode program dengan menggunakan bahasa

PHP.

4) Testing

Kegiatan testing dilakukan untuk meminimalisir kesalahan (error) dan untuk

memastikan keluaran yang dihasilkan telah sesuai dengan user requirement

dengan menggunakan metode black box testing.

5) Support

Kegiatan support dilakukan untuk menindaklanjuti perubahan yang dimintakan

user setelah keluaran telah diserahkan kepada pengguna. Perubahan bisa terjadi

karena adanya kesalahan yang muncul dan tidak terdeteksi saat pengujian atau

adaptasi dengan kebutuhan/lingkungan baru.

3.5 PERANCANGAN SISTEM

Perancangan system aplikasi menggambar berbasis web ini menggunakan DFD

(Data Flow Diagram) yang merupakan salah satu teknik pemodelan desain sistem berbasis

web. Pemodelan ini menjadi bagian penting dalam pengembangan sistem karena menjadi

satu satunya cara untuk memvisualisasikan desain sistem dan memeriksa apakah sudah

memenuhi standar yang diinginkan sebelum memulai coding. Beberapa jenis Diagram

yang dibuat antara lain yaitu Diagram konteks, DFD dan ERD.

a. Diagram Level 0 (Diagram Konteks)

Diagram konteks atau level 0 merupakan diagram dengan tingkatan paling

rendah, dimana menggambarkan sistem berinteraksi dengan entitas eksternal.

Pada diagram konteks akan diberi nomor untuk setiap proses yang berjalan,

dimulai dari angka 0 terlebih dahulu.

b. Diagram Level 1

DFD level 1 merupakan lanjutan dari diagram konteks, dimana setiap proses

yang berjalan akan diperinci pada tingkatan ini. Sehingga, proses utama akan

dipecah menjadi sub – sub proses yang lebih kecil lagi.

c. Diagram level 2

DFD level 2 merupakan tingkat lanjutan dari level yang sebelumnya, dimana

pada fase ini akan dijelaskan lebih detail terkait tiap prosesnya. Namun, untuk

tingkatan ini jarang sekali dikerjakan dan lebih banyak hanya menerapkan dua

level di bawahnya saja.

d. ERD

ERD (Entity Relationship Diagram) atau diagram hubungan entitas adalah

diagram yang digunakan untuk perancangan suatu database dan menunjukan

relasi antar objek atau entitas beserta atribut-atributnya secara detail.

3.6 PERANCANGAN DATABASE

3.7 DESAIN INTERFACE

3.7.1 Landing Page

3.7.2 Halaman Login

3.7.3 Halaman Daftar

3.7.4 Home

3.7.5 Halaman Menggambar

3.7.6 Daftar Gambar User

3.7.7 Hapus Daftar Gambar User

3.7.8 Daftar Nama User pada Admin

3.7.9 Daftar Gambar User pada Admin

3.7.10 Daftar Gambar User yang sudah dihapus oleh Admin

BAB IV

IMPLEMENTASI DAN PENGUJIAN

4.1 Landing Page dan Source Code

Pada bagian Dashboard page memuat tampilan utama yang berisi login untuk

menghubungkan ke halaman login.

4.2 Halaman Login dan Source Code

Pada halaman login berisi inputan untuk memasukkan email/username dan pasword

untuk login.

4.3 Halaman Daftar dan Source Code

Jika pengguna belum mempunyai akun maka disarankan untuk daftar terlebih dahulu pada

halaman daftar berisi inputan untuk memasukkan email, username dan pasword untuk

mendaftar

4.4 Home dan Sorce Code

Pada bagian home memuat button untuk membuat gambar dan melihat daftar gambar.

4.5 Halaman Menggambar dan Source Code

Pada page gambar berfungsi sebagai menggambar seperti tujuan aplikasi yang dibuat.

4.6 Daftar Gambar dan Source Code

Di halaman daftar gambar berisi daftar gambar user dan button untuk menghapus daftar

gambar.

4.7 Daftar Gambar sesudah delete dan Source Code

Pada page hapus daftar gambar memuat tampilan daftar gambar yang sudah terhapus

BAB III

ANALISIS DAN PENGEMBANGAN SISTEM